<template>
  <div class="my">
    <!-- 头部 -->
    <header class="header">
      <div class="login" v-if="isLogin">
        <van-row />
        <van-row type="flex" justify="space-around">
          <van-col span="6" offset="2"
            ><van-image round width="1.5rem" height="1.5rem" :src="user.photo"
          /></van-col>
          <van-col span="6"
            ><span class="nickname">{{ user.name }}</span></van-col
          >
          <van-col span="6" offset="2">
            <van-button round size="small" @click="$router.push('/user')"
              >编辑资料</van-button
            >
          </van-col>
        </van-row>
        <van-row>
          <van-grid class="info-grid" :border="false">
            <van-grid-item text="头条">
              <template #icon>{{ user.art_count }}</template>
            </van-grid-item>
            <van-grid-item text="粉丝">
              <template #icon>{{ user.fans_count }}</template>
            </van-grid-item>
            <van-grid-item text="关注">
              <template #icon>{{ user.follow_count }}</template>
            </van-grid-item>
            <van-grid-item text="获赞">
              <template #icon>{{ user.like_count }}</template>
            </van-grid-item>
          </van-grid>
        </van-row>
      </div>

      <!-- 未登录 -->
      <div class="logout" v-else @click="$router.push('/login')">
        <!-- 头像 -->
        <img src="@/assets/images/mobile.png" alt="" />
        <!-- 文字 -->
        <span>登录 / 注册</span>
      </div>
    </header>

    <!-- 中间 -->
    <main class="main">
      <!-- 收藏 -->
      <van-grid :column-num="2">
        <van-grid-item icon="star-o" text="收藏" />
        <van-grid-item icon="clock-o" text="历史" />
      </van-grid>
      <!-- 消息通知/小智同学 -->
      <div class="link">
        <van-cell title="消息通知" is-link />
        <van-cell title="小智同学" is-link />
      </div>
    </main>

    <!-- 底部 -->
    <footer class="footer">
      <van-button class="btn" v-if="isLogin" @click="logout" size="large"
        >退出</van-button
      >
    </footer>
  </div>
</template>

<script>
import { getUserAPI } from '@/api'
export default {
  data() {
    return {
      user: {}
    }
  },
  computed: {
    isLogin() {
      return !!this.$store.state.tokenObj.token
    }
  },
  created() {
    this.getUser()
  },
  methods: {
    async getUser() {
      try {
        const { data } = await getUserAPI()
        console.log(data)
        this.user = data.data
      } catch ({ response: { data } }) {
        this.$toast.fail(data.message)
      }
    },
    logout() {
      this.$dialog
        .confirm({
          title: '黑马头条',
          message: '是否确认退出该账号？'
        })
        .then(() => {
          // on confirm
          // 点击按钮时
          // 传入空对象 置空token 回到未登录状态
          this.$store.commit('SET_TOKEN', {})
        })
        .catch(() => {
          // on cancel
        })
    }
  }
}
</script>

<style scoped lang="less">
.my {
  background-color: #f5f7f9;
  height: calc(100vh - 1.33333rem);
  .header {
    width: 100%;
    height: 5.33333rem;
    background-image: url(@/assets/images/banner.png);
    background-size: cover;
    .logout {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      img {
        width: 1.76rem;
        height: 1.76rem;
      }
      span {
        color: #fff;
        font-size: 0.4rem;
        margin-top: 0.26667rem;
      }
    }
    .login {
      display: flex;
      flex-direction: column;
      height: 100%;
      .van-row {
        flex: 1;
        .nickname {
          font-size: 0.4rem;
          color: #fff;
        }
        .info-grid {
          :deep(.van-grid-item__content) {
            background-color: transparent;
            color: #fff;
            .van-grid-item__icon-wrapper {
              font-size: 0.4rem;
            }
            .van-grid-item__text {
              color: #fff;
            }
          }
        }

        .van-button--small {
          height: 0.5333rem;
        }
      }
    }
  }
  .main {
    :deep(.van-grid-item__content) {
      .van-icon-star-o {
        color: red;
      }
      .van-icon-clock-o {
        color: #ffb31d;
      }
    }
    .link {
      margin: 0.13333rem 0;
    }
  }

  .footer {
    .btn {
      color: red;
    }
  }
}
</style>
